<template>
  <div class="reset-password">
    <div class="logo">
      <el-image style="width: 360px; height: 90px" :src="require('@/assets/images/login/login_logo.png')"></el-image>
    </div>
    <div class="login-left">
      <div class="login-left__logo">
        <el-image style="width: 636px; height: 578px; margin-left: 25%"
          :src="require('@/assets/images/login/login_left_icon.svg')"></el-image>
      </div>
      <!--  底部  -->
      <div class="el-login-footer">
        <span style="color: #313131">
          Copyright © 2018-2024 ytzc.latu88.com All Rights Reserved.
        </span>
        <a target="_blank" href="https://beian.miit.gov.cn/" style="color: #0a65f3">
          闽ICP备2023012750号-1
        </a>
      </div>
    </div>
    <div class="login-right">
      <div class="reset-password-form">
        <h3 class="title">工船宝管理后台</h3>
        <el-form ref="resetPasswordForm" :model="resetPasswordForm" :rules="registerRules">
          <el-form-item prop="phone">
            <el-input v-model="resetPasswordForm.phone" clearable placeholder="请输入手机号">
            </el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <div class="login-msg-captcha">
              <el-input v-model="resetPasswordForm.captcha" clearable placeholder="请输入验证码"></el-input>
              <el-button size="mini" @click="getCaptcha" :disabled="showTime">获取验证码<span v-if="showTime"> ({{ time
                  }})</span></el-button>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="resetPasswordForm.password" type="password" placeholder="请输入密码"
              @keyup.enter.native="handleResetPass"></el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword" style="margin-bottom: 35px">
            <el-input v-model="resetPasswordForm.confirmPassword" type="password" placeholder="请输入确认密码"
              @keyup.enter.native="handleResetPass"></el-input>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button :loading="loading" type="primary" style="width: 100%; height: 40px; font-size: 18px"
              @click.native.prevent="handleResetPass">
              <span v-if="!loading">确定修改</span>
              <span v-else>重 置 中...</span>
            </el-button>
            <div style="float: right">
              <router-link class="link-type" :to="'/login'">返回登录</router-link>
            </div>
          </el-form-item>
        </el-form>
        <!-- <reset-password></reset-password> -->
      </div>
      <div class="login-form__point">
        <el-image style="width: 135px; height: 59px"
          :src="require('@/assets/images/login/login_modal_bottom.png')"></el-image>
      </div>
    </div>
  </div>
</template>

<script>
import { phoneIsRegister, sendSmsCode, resetPassword } from '@/api/login';
import { validPhone } from '@/utils/validate';
export default {
  name: 'ResetPassword',
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.resetPasswordForm.password !== value) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    };
    const isPhone = (rule, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    };
    return {
      codeUrl: '',
      resetPasswordForm: {
        // username: "",
        password: '',
        confirmPassword: '',
        code: '',
        uuid: '',
        phone: '',
        captcha: '',
      },
      registerRules: {
        // username: [
        // 	{ required: true, trigger: "blur", message: "请输入您的账号" },
        // 	{ min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
        // ],
        password: [
          { required: true, trigger: 'blur', message: '请输入您的密码' },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
        ],
        confirmPassword: [
          { required: true, trigger: 'blur', message: '请再次输入您的密码' },
          { required: true, validator: equalToPassword, trigger: 'blur' },
        ],
        phone: [
          { required: true, trigger: 'blur', message: '请输入手机号' },
          { required: true, validator: isPhone, trigger: 'blur' },
        ],
        code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
      },
      loading: false,
      time: 0,
      showTime: false,
    };
  },
  created() { },
  methods: {
    // getCaptcha方法用于获取验证码并进行相关的逻辑处理
    getCaptcha() {
      // 调用validateField方法对名为phone的字段进行校验，并将校验结果通过回调函数的参数phoneError传递给回调函数
      this.$refs.resetPasswordForm.validateField('phone', async (phoneError) => {
        // 校验通过，则执行以下操作：
        if (!phoneError) {
          // this.$message.success("获取验证码成功")
          let query = {
            phone: this.resetPasswordForm.phone,
          };
          const res = await phoneIsRegister(query);
          if (res.code != 200) {
            this.$message.error(res.message || res.msg);
          } else {
            sendSmsCode(query)
              .then((res) => { })
              .catch((err) => {
                this.$message.error('获取验证码失败！');
              });
          }
          // 设置showTime属性为true，用于控制显示倒计时
          this.showTime = true;
          this.time = 60;
          let t = setInterval(() => {
            this.time -= 1;
            if (this.time < 1) {
              clearInterval(t);
              this.showTime = false;
              this.time = 0;
            }
          }, 1000);
        }
      });
    },
    handleResetPass() {
      this.$refs.resetPasswordForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let data = {
            userPhone: this.resetPasswordForm.phone,
            verifyCode: this.resetPasswordForm.captcha,
            newPassword: this.resetPasswordForm.password,
          };
          resetPassword(data)
            .then((res) => {
              // const username = this.resetPasswordForm.username;
              this.$alert("<font color='red'>恭喜你，您的账号重置成功！</font>", '系统提示', {
                dangerouslyUseHTMLString: true,
                type: 'success',
              })
                .then(() => {
                  this.$router.push('/login');
                })
                .catch(() => { });
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.reset-password {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  .logo {
    position: absolute;
    top: 35px;
    left: 35px;
    z-index: 1;
  }

  .login-left {
    flex-shrink: 0;
    height: 100%;
    width: 75%;
    background-color: #f3f6f9;
    position: relative;

    .login-left__logo {
      height: inherit;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

    .el-login-footer {
      height: 40px;
      line-height: 32px;
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: #fff;
      font-family: Arial;
      font-size: 16px;
      letter-spacing: 1px;
    }
  }

  .login-right {
    flex-shrink: 0;
    height: 100%;
    width: 25%;
    background-color: #1f64ff;
    position: relative;

    .reset-password-form {
      position: absolute;
      left: -200px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 6px;
      background: #ffffff;
      width: 400px;
      height: 522px;
      padding: 50px 40px 82px 40px;

      .login-msg-captcha {
        display: flex;
        gap: 16px;
      }

      & ::v-deep .el-tabs__header {
        margin-bottom: 34px;
      }

      & ::v-deep .el-tabs__nav {
        width: 100%;
      }

      & ::v-deep .el-tabs__item {
        padding: 0 32px;
        width: 50%;
        font-size: 18px;
        text-align: center;
        line-height: 26px;
      }
    }

    .login-form__point {
      position: absolute;
      left: -67.5px;
      top: calc(50% + 261px + 6px);
    }
  }
}

.title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  color: #000000;
  margin: 0 0 55px 0;
}

.reset-password-form ::v-deep .el-input input {
  height: 45px;
  background: #f8f8f8;
}

.reset-password-form ::v-deep .el-input input {
  //height: 38px;
  border-color: #e2e2e2;
}

::v-deep .login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

::v-deep .login-code {
  width: 38%;
  height: 45px;
  float: right;
}

::v-deep .login-code-img {
  height: 45px;
}
</style>
